
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>狐言乱语的小天地</title>
    <style>
        body {
            margin: 0;
            font-family: 'Arial', sans-serif;
            background: url('https://www.transparenttextures.com/patterns/fox.png'), #FFE5B4;
            color: #4A403A;
        }
        header {
            background-color: #FF7F50;
            color: white;
            text-align: center;
            padding: 20px;
        }
        h1 {
            margin: 0;
        }
        .timeline {
            margin: 20px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
        }
        .timeline h2 {
            text-align: center;
        }
        .event {
            margin-bottom: 15px;
        }
        .countdown {
            text-align: center;
            margin: 20px 0;
            padding: 10px;
            background: rgba(255, 127, 80, 0.8);
            color: white;
            border-radius: 10px;
        }
        .music-player {
            margin: 20px auto;
            text-align: center;
        }
        .hidden {
            text-align: center;
            margin-top: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <header>
        <h1>狐言乱语的小天地</h1>
        <p>无论时间去哪儿，我的心只会为你跳动。</p>
    </header>
    
    <section class="timeline">
        <h2>甜蜜回忆</h2>
        <div class="event">2024年12月30日：我们的恋爱开始啦！</div>
        <div class="event">2025年1月1日：一起规划了我们专属的网页！</div>
        <div class="event">更多精彩待续...</div>
    </section>
    
    <section class="countdown">
        距离下一次恋爱纪念日还有 <span id="days-count"></span> 天！
    </section>
    
    <section class="music-player">
        <h2>我们的专属歌单</h2>
        <audio controls>
            <source src="https://www.bensound.com/bensound-music/bensound-romantic.mp3" type="audio/mp3">
            您的浏览器不支持音频播放。
        </audio>
    </section>
    
    <div class="hidden" onclick="showSecret()">点我看看隐藏彩蛋！</div>
    <p id="secret-message" style="display:none;">笙笙最爱你啦！</p>

    <script>
        function showSecret() {
            document.getElementById("secret-message").style.display = "block";
        }
        
        // Countdown logic
        const today = new Date();
        const nextAnniversary = new Date(today.getFullYear() + 1, 11, 30); // December 30
        const diffTime = Math.abs(nextAnniversary - today);
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
        document.getElementById('days-count').textContent = diffDays;
    </script>
</body>
</html>
